import React, { Component } from 'react'
import PropTypes from 'prop-types';


export class Title extends Component {
    render() {
        const { list, changeTitle, activeId, delFn } = this.props; //接收参数
        return (
            <div className='title'>
                <ul>
                    {
                        list.length ?
                            list.map(item => {
                                // 开关flag为true的情况再对右侧标题进行渲染 
                                return item.flag ? <li
                                    key={item.id}
                                    onClick={() => {
                                        changeTitle(item.id); //点击右侧头部，左侧对应内容和高亮切换
                                    }}
                                    //点击左侧--右侧头部对应内容高亮；点击右侧头部对应内容高亮
                                    className={item.id === activeId ? "on" : ""}
                                >
                                    <span>{item.title}</span>
                                    <b
                                        onClick={(e) => {
                                            e.stopPropagation(); //阻止冒泡---高亮还在之前那项上
                                            delFn(item.id)  //点击删除
                                        }}
                                    >❌</b>

                                </li> : null
                            }) : "暂无数据"
                    }
                </ul>
            </div>
        )
    }
}


// 数据类型校验 
Title.propTypes = {
    list: PropTypes.array,
    changeTitle: PropTypes.func.isRequired,
    delFn: PropTypes.func.isRequired
};

// 设置默认值 
Title.defaultProps = {
    list: []
};
export default Title